<template>
  <el-dialog
    :title="headTitle"
    :visible.sync="dialogVisible"
    width="400px"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="dialog">
      <div class="dialog-list">
        <label require="true">日期:</label>
        <div class="span">
          <el-date-picker
            v-model="formData.accountTime"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </div>
      </div>
      <div class="dialog-list">
        <label require="true">项目:</label>
        <div class="span">
          <el-select
            size="small"
            v-model="formData.deptId"
            placeholder="请选择"
            filterable
          >
            <el-option
              v-for="item in projectList"
              :key="item.deptId"
              :label="item.deptCodedeptName"
              :value="item.deptId"
            >
              {{ item.deptName }}
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="dialog-list">
        <label require="true">收/支:</label>
        <div class="span">
          <el-radio v-model="formData.accountType" label="1">收入</el-radio>
          <el-radio v-model="formData.accountType" label="2">支出</el-radio>
        </div>
      </div>
      <div class="dialog-list">
        <label require="true">金额:</label>
        <div class="span">
          <el-input v-model="formData.accountAmount"></el-input>
        </div>
      </div>
      <div class="dialog-list">
        <label></label>
        <div class="span" style="color: red; font-weight: bold">
          {{ numberToUpper(formData.accountAmount) || "零圆" }}
        </div>
      </div>
      <div class="dialog-list">
        <!-- <label require="true">资金类型:</label> -->
        <label require="true">资金类型:</label>
        <div class="span">
          <el-select
            clearable
            filterable
            size="small"
            v-model="formData.accountFundTypeId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in accountFundTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="dialog-list">
        <!-- <label require="true">资金账户:</label> -->
        <label require="true">我的账户:</label>
        <div class="span">
          <el-select
            clearable
            filterable
            size="small"
            v-model="formData.fundAccountNameId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in fundAccountList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="dialog-list">
        <!-- <label require="true">对方单位:</label> -->
        <label require="true">对方账户:</label>
        <div class="span">
          <el-select
            clearable
            filterable
            size="small"
            v-model="formData.currentAccountId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in currentAccountList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="dialog-list">
        <label>备注:</label>
        <div class="span">
          <el-input
            type="textarea"
            v-model="formData.remark"
            :rows="2"
            placeholder="请输入内容"
          >
          </el-input>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit(2)">提交</el-button>
      <!-- <el-button type="primary" @click="submit(1)">暂存</el-button> -->
      <el-button @click="(dialogVisible = false), updateKey()">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import Qs from "qs";
export default {
  props: {
    headTitle: {},
    projectList: {},
  },
  // /system/flow/accFundType     参数:category      1:对方单位|2:资金账户|3:资金类型:
  data() {
    return {
      dialogVisible: false,
      accountFundTypeList: [], //资金类型list
      fundAccountList: [], //资金账户list
      currentAccountList: [], //对方单位list
      formData: {
        accountTime: new Date(),
        deptId: "",
        accountType: "2",
        accountAmount: "",
        accountFundTypeId: "",
        fundAccountNameId: "",
        currentAccountId: "",
        remark: "",
      },
      pData: {},
      radio: "",
      dateRange: "",
      options: [],
      value: "",
    };
  },
  methods: {
    numberToUpper(money) {
      let prefix = "";
      if (money < 0) {
        prefix = "负";
        money=Math.abs(money)
      }
      var cnNums = new Array(
        "零",
        "壹",
        "贰",
        "叁",
        "肆",
        "伍",
        "陆",
        "柒",
        "捌",
        "玖"
      ); //汉字的数字
      var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
      var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
      var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
      var cnInteger = "整"; //整数金额时后面跟的字符
      var cnIntLast = "元"; //整型完以后的单位
      var maxNum = 999999999999999.9999; //最大处理的数字
      var IntegerNum; //金额整数部分
      var DecimalNum; //金额小数部分
      var ChineseStr = ""; //输出的中文金额字符串
      var parts; //分离金额后用的数组，预定义
      if (money == "") {
        return "";
      }
      money = parseFloat(money);
      if (money >= maxNum) {
        alert("超出最大处理数字");
        return "";
      }
      if (money == 0) {
        ChineseStr = cnNums[0] + cnIntLast + cnInteger;
        return ChineseStr;
      }
      money = money.toString(); //转换为字符串
      if (money.indexOf(".") == -1) {
        IntegerNum = money;
        DecimalNum = "";
      } else {
        parts = money.split(".");
        IntegerNum = parts[0];
        DecimalNum = parts[1].substr(0, 4);
      }
      if (parseInt(IntegerNum, 10) > 0) {
        //获取整型部分转换
        var zeroCount = 0;
        var IntLen = IntegerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = IntegerNum.substr(i, 1);
          var p = IntLen - i - 1;
          var q = p / 4;
          var m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              ChineseStr += cnNums[0];
            }
            zeroCount = 0; //归零
            ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            ChineseStr += cnIntUnits[q];
          }
        }
        ChineseStr += cnIntLast;
        //整型部分处理完毕
      }
      if (DecimalNum != "") {
        //小数部分
        var decLen = DecimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var n = DecimalNum.substr(i, 1);
          if (n != "0") {
            ChineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (ChineseStr == "") {
        ChineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (DecimalNum == "") {
        ChineseStr += cnInteger;
      }
      return `${prefix}${ChineseStr}`;
    },
    getaccFundType(category) {
      request({
        url: "/system/flow/accFundType",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          category,
        }),
      }).then((res) => {
        const data = {
          2: "fundAccountList",
          1: "currentAccountList",
          3: "accountFundTypeList",
        };
        this[data[category]] = res.data;
        console.log(res);
      });
    },
    getaccFundMerge(category) {
      request({
        url: "/system/flow/accFundMerge",
        method: "post",
      }).then((res) => {
        const data = {
          2: "fundAccountList",
          1: "currentAccountList",
          3: "accountFundTypeList",
        };
        this[data[category]] = res.data;
        console.log(res);
      });
    },
    submit(val) {
      if (!this.formData.accountTime || this.formData.accountTime === "") {
        this.$message.error("日期不能为空");
        return;
      }
      if (!this.formData.deptId || this.formData.deptId === "") {
        this.$message.error("项目不能为空");
        return;
      }
      if (!this.formData.accountType || this.formData.accountType === "") {
        this.$message.error("收/支不能为空");
        return;
      }
      if (!this.formData.accountAmount || this.formData.accountAmount === "") {
        this.$message.error("金额不能为空");
        return;
      }
      if (
        !this.formData.accountFundTypeId ||
        this.formData.accountFundTypeId === ""
      ) {
        this.$message.error("资金类型不能为空");
        return;
      }
      if (
        !this.formData.fundAccountNameId ||
        this.formData.fundAccountNameId === ""
      ) {
        this.$message.error("资金账户不能为空");
        return;
      }
      if (!this.formData.currentAccountId || this.formData.currentAccountId === "") {
        this.$message.error("对方账户不能为空");
        return;
      }
      this.formData.opeType = val;
      this.formData.deptName = this.projectList.filter(
        (item) => item.deptId === this.formData.deptId
      )[0].deptName; //项目名
      this.formData.accountFundTypeName = this.accountFundTypeList.filter(
        (item) => item.id === this.formData.accountFundTypeId
      )[0].name; //资金类型名
      this.formData.fundAccountName = this.fundAccountList.filter(
        (item) => item.id === this.formData.fundAccountNameId
      )[0].name; //资金账户名
      this.formData.currentAccountName = this.currentAccountList.filter(
        (item) => item.id === this.formData.currentAccountId
      )[0].name; //对方单位名
      console.log(this.formData);
      if (val === 1) {
        this.add();
      } else {
        this[this.pData.type]();
      }
    },
    save() {},
    add() {
      request({
        url: "/system/flow/add",
        method: "post",
        // headers: { "content-type": "application/x-www-form-urlencoded" },
        data: {
          ...this.formData,
        },
      }).then((res) => {
        this.$emit("reload");
        this.dialogVisible = false;
        this.updateKey();
        console.log(res);
      });
    },
    edit() {
      this.formData.accountId = this.pData.currentRow.accountId;
      // this.formData.opeType=this.pData.currentRow.status
      request({
        url: "/system/flow/edit",
        method: "post",
        // headers: { "content-type": "application/x-www-form-urlencoded" },
        data: {
          ...this.formData,
        },
      }).then((res) => {
        this.$emit("reload");
        this.dialogVisible = false;
        this.updateKey();
        console.log(res);
      });
    },
    open(data) {
      this.pData = JSON.parse(JSON.stringify(data));
      this.getaccFundMerge(1);
      this.getaccFundType(2);
      this.getaccFundType(3);
      if (data.type === "edit") {
        this.formData.accountTime = data.currentRow.accountTime;
        this.formData.deptId = data.currentRow.deptId;
        this.formData.accountType = data.currentRow.accountType.toString();
        this.formData.accountAmount = data.currentRow.accountAmount;
        this.formData.accountFundTypeId = data.currentRow.accountFundTypeId;
        this.formData.fundAccountNameId = data.currentRow.fundAccountNameId;
        this.formData.currentAccountId = data.currentRow.currentAccountId;
        this.formData.remark = data.currentRow.remark;
      }
      this.dialogVisible = true;
    },
    updateKey() {
      this.$emit("update:keyIndex", new Date().getTime());
    },
    handleClose(done) {
      this.dialogVisible = false;
      this.updateKey();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  .dialog {
    width: 100%;

    &-list {
      width: 100%;
      min-height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;

      label {
        width: 100px;
        text-align: right;
        padding: 0 10px;
      }

      label[require="true"]::before {
        content: "*";
        color: red;
      }

      .span {
        width: calc(100% - 100px);
        height: 100%;
        display: flex;
        align-items: center;

        .el-select,
        .el-date-editor {
          width: 100% !important;
        }
      }
    }
  }
}
</style>
